<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>可视化专题</title>
<%include("/common/css.html"){} %>
</head>
<body>
<!-- 浮动菜单 -->
<div class="ui large top fixed hidden menu">
  <div class="ui container">
    <a class="item" href="${ctxPath!}/">首页</a>
    <a class="active item">数据可视化</a>
    <a class="item" href="${ctxPath!}/pagination">分页</a>
  </div>
</div>

<!-- 侧边菜单 -->
<div class="ui vertical inverted sidebar menu">
  <a class="item" href="${ctxPath!}/">首页</a>
  <a class="active item">数据可视化</a>
  <a class="item" href="${ctxPath!}/pagination">分页</a>
</div>


<!-- 页面内容 -->
<div class="pusher">

	<div class="ui inverted vertical masthead center aligned segment">
		<div class="ui container">
	      <div class="ui large secondary inverted pointing menu">
	        <a class="toc item">
	          <i class="sidebar icon"></i>
	        </a>
	        <a class="item" href="${ctxPath!}/">首页</a>
	        <a class="active item">数据可视化</a>
	        <a class="item" href="${ctxPath!}/pagination">分页</a>
	      </div>
	    </div>
	
	    <div class="ui text container">
	      <h1 class="ui inverted header">
	        数据可视化专题
	      </h1>
	    </div>
	</div>
	
	<div class="ui vertical stripe segment">
	    <div class="ui stackable two column divided grid">
	    	<h2 class="ui horizontal divider header">折线图专题</h2>
	    	<div class="row">
	        	<div class="seven wide column">
		          <h3 class="ui center aligned header">中国总人口数据(单位：万人)</h3>
		          <table class="ui celled table">
		          	<thead>
		          		<tr>
		          			<th>年份</th>
		          			<th>人口总数</th>
		          			<th>男性人口</th>
		          			<th>女性人口</th>
		          			<th>城镇人口</th>
		          			<th>乡村人口</th>
		          		</tr>
		          	</thead>
		          	 	<%
		          	 		var pretotal = 0, preman = 0, prewomen = 0, pretown = 0, prerural = 0;
		          	 	%>
			          	<%for(population in populations) {%>
			          		<tr>
			          			<td>${population.year!}</td>
			          			<td>
			          				${population.total!} 
			          				<%
			          					var rtotal = population.total - pretotal;
			          					if(rtotal >= 0) {
			          				%>
			          					<span class="ui red label"><i class="long arrow up icon"></i>${rtotal}</span>
			          				<%} else {%>
			          					<span class="ui green label"><i class="long arrow down icon"></i>${-rtotal}</span>
			          				<%}%>
			          			</td>
			          			<td>
			          				${population.man!}
			          				<%
			          					var rman = population.man - preman;
			          					if(rman >= 0) {
			          				%>
			          					<span class="ui red label"><i class="long arrow up icon"></i>${rman}</span>
			          				<%} else {%>
			          					<span class="ui green label"><i class="long arrow down icon"></i>${-rman}</span>
			          				<%}%>
			          			</td>
			          			<td>
			          				${population.women!}
			          				<%
			          					var rwomen = population.women - prewomen;
			          					if(rwomen >= 0) {
			          				%>
			          					<span class="ui red label"><i class="long arrow up icon"></i>${rwomen}</span>
			          				<%} else {%>
			          					<span class="ui green label"><i class="long arrow down icon"></i>${-rwomen}</span>
			          				<%}%>
			          			</td>
			          			<td>
			          				${population.townpop!}
			          				<%
			          					var rtown = population.townpop - pretown;
			          					if(rtown >= 0) {
			          				%>
			          					<span class="ui red label"><i class="long arrow up icon"></i>${rtown}</span>
			          				<%} else {%>
			          					<span class="ui green label"><i class="long arrow down icon"></i>${-rtown}</span>
			          				<%}%>
			          			</td>
			          			<td>
			          				${population.ruralpop!}
			          				<%
			          					var rrural = population.ruralpop - prerural;
			          					if(rrural >= 0) {
			          				%>
			          					<span class="ui red label"><i class="long arrow up icon"></i>${rrural}</span>
			          				<%} else {%>
			          					<span class="ui green label"><i class="long arrow down icon"></i>${-rrural}</span>
			          				<%}%>
			          			</td>
			          		</tr>
			          		<%
			          			preyear = population.year;
			          			pretotal = population.total;
			          			preman = population.man;
			          			prewomen = population.women;
			          			pretown = population.townpop;
			          			prerural = population.ruralpop;
			          		%>
			          	<%}%>
		          </table>
		       </div>
		       <div class="nine wide column">
		          	<div id="vis_population" style="height: 600px;"></div>
		       </div>
		     </div>
		      <div class="ui horizontal divider">词云专题</div>
		     <div class="row">
		     	<div class="seven wide column">
		     		<h3 class="ui center aligned header">天猫手机销量前10(单位：台)</h3>
		     		<table class="ui celled fixed center aligned table">
		     			<thead>
		     				<tr>
		     					<th>手机品牌</th>
		     					<th>销售量</th>
		     				</tr>
		     			</thead>
		     		<%
		     			for(r in top10) {
		     		%>
		     			<tr>
		     				<td><a class="ui green tag label" href="javascript:;">${r.brand}</a></td>
		     				<td>${r.count}</td>
		     			</tr>	
		     		<%}%>
		     		</table>
		     	</div>
		     	<div class="nine wide column">
		          	<div id="vis_tmallmobile" style="height: 600px;"></div>
		       </div>
		     </div>
	    </div>
	 </div>

	<!-- 页脚 -->
	<div class="ui inverted vertical footer segment">
		<div class="ui container">
			<div class="ui stackable inverted divided equal height stackable grid">
		        <div class="three wide column">
			    	
		        </div>
		        <div class="ten wide column center aligned">
		        	<div class="ui horizontal inverted small divided link list">
			        	<a class="item" href="javascript:;">Copyright 2016-2017</a>
			      	</div>
		        </div>
		        <div class="three wide column">
			        <h4 class="ui inverted header">关于</h4>
			        <div class="ui inverted link list">
			            <a href="http://my.oschina.net/mobinchao/home" class="item">我的开源博客</a>
			            <a href="http://git.oschina.net/mobinchao" class="item">我的git仓库</a>
			        </div>
			    </div>
	        </div>
		</div>
	</div>
</div>
<%include("/common/js.html"){} %>
<script type="text/javascript">
	var vis_population_option = ${popOptionJson!},
		vis_tmallmobile_option = ${tmallMobile!};
	
</script>
<script type="text/javascript" src="${ctxPath!}/resources/jslibs/pages/vis/index.js"></script>
</body>
</html>